<template>
  <el-table-column
    :label="label"
    :prop="prop"
    :sortable="sortable"
    :formatter="formatter"
    :show-overflow-tooltip="showOverflowTooltip"
    :width="width"
    :min-width="minWidth"
    header-align="center"
    align="center"
  >
    <template slot-scope="scope">
      <span :DESC="genDesc(scope)" :DATE="genDate(scope)" :TIME="genTime(scope)" :MONEY="genMoney(scope)" />
      <span v-if="formatter" v-html="formatter(scope.row,scope.column,scope.row[prop])" />
      <span v-else>
        <span v-if="clcd">{{ scope.row[prop + DESC_SUFIX] }}</span>
        <span v-else-if="date">
          {{ scope.row[prop + DATE_SUFIX] }}
        </span>
        <span v-else-if="time">
          {{ scope.row[prop + TIME_SUFIX] }}
        </span>
        <span v-else-if="money">
          {{ scope.row[prop + MONEY_SUFIX] }}
        </span>
        <span v-else>
          {{ scope.row[prop] }}
        </span>
      </span>
    </template>
  </el-table-column>
</template>

<script>
import utils from '@/utils/utils'
import { date2Str } from '@/utils/date_util'
import numSplit from '@/utils/numSplit'
const DZG_CONST = {}
const DESC_SUFIX = '_DESC'
const DATE_SUFIX = '_DATE'
const TIME_SUFIX = '_TIME'
const MONEY_SUFIX = '_MONEY'
export default {
  name: 'DzgTableColumn',
  mixins: [utils],
  props: {
    label: {
      type: String
    },
    prop: String,
    sortable: Boolean,
    formatter: Function,
    showOverflowTooltip: {
      type: Boolean,
      default: true
    },
    width: String,
    minWidth: String,
    clcd: String,
    date: Boolean,
    time: Boolean,
    money: [Boolean, String, Number]
  },
  data() {
    return {
      DZG_CONST,
      DESC_SUFIX,
      DATE_SUFIX,
      TIME_SUFIX,
      MONEY_SUFIX
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    async codeTransform(clcd, val) {
      if (this.isNull(val)) {
        return ''
      }
      return await this.fmtClcd(clcd, val)
    },
    async genDesc({ row }) {
      const { clcd, prop } = this
      if (clcd) {
        const value = await this.codeTransform(clcd, row[prop]) // .replace(DESC_SUFIX, '')
        value && this.$set(row, prop + DESC_SUFIX, value)
      }
    },
    genDate({ row }) {
      const { NO_DATE, DATE_FMT } = this.DZG_CONST
      const { date, prop } = this
      if (date) {
        const value = date2Str(row[prop], DATE_FMT)
        if (value !== NO_DATE) {
          row[prop] = value
        }
        this.$set(row, prop + DATE_SUFIX, value)
      }
      return row[prop]
    },
    genTime({ row }) {
      const { time, prop } = this
      const { NO_DATE, TIME_FMT } = this.DZG_CONST
      if (time) {
        const value = date2Str(row[prop], TIME_FMT)
        if (value !== NO_DATE) {
          row[prop] = value
        }
        this.$set(row, prop + TIME_SUFIX, value)
      }
      return row[prop]
    },
    genMoney({ row }) {
      const { money, prop } = this
      if (money) {
        const decimal = money === true ? '' : money
        let value = row[prop]
        if (decimal) {
          value = numSplit(value, ',', 3, decimal)
        } else {
          value = numSplit(value, ',', 3)
        }
        this.$set(row, prop + MONEY_SUFIX, value)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
